<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all" />
    <style>
        .layui-form-item .layui-input-inline {
            width: 150px;
        }

        .layui-form-label {
            padding: 9px 5px;
            width: auto;
        }

        .layui-table-cell {
            height: auto;
            overflow: visible;
            text-overflow: inherit;
            white-space: normal;
        }
    </style>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <form class="layui-form" action="" id="sbumitForm">
                <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                    <div class="layui-form-item">
                        <div class="layui-inline ">
                            <label class="layui-form-label">登录设备</label>
                            <div class="layui-input-inline" style="width: 100px">
                                <select name="platform">
                                    <option value="">全部</option>
                                    <option value="0">浏览器</option>
                                    <option value="1">IOS</option>
                                    <option value="2">安卓</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline ">
                            <label class="layui-form-label">用户等级</label>
                            <div class="layui-input-inline" style="width: 100px">
                                <select name="level">
                                    <option value="">全部</option>
                                    <?php foreach($level as $value) {?>
                                    <option value="{$value}">LV{$value}</option>
                                    <?php }?>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">用户ID</label>
                            <div class="layui-input-inline">
                                <input type="text" name="user_id" placeholder="用户ID" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">用户昵称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="nickname" placeholder="用户昵称" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">最近在线时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="last_online_time" placeholder="最近在线时间" id="login_time" readonly
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">主播ID</label>
                            <div class="layui-input-inline">
                                <input type="text" name="room_id" placeholder="用户昵称" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <div class="layui-btn" id="FormSubmit">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="layui-card-body">
                <table id="demo" lay-filter="test"></table>
                <script type="text/html" id="toolbaar">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="start_mult_chat">勾选开始群发</button>
                        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="start_all_chat">全部开始群发</button>
                    </div>
                </script>
            </div>
        </div>
    </div>

    <script src="/layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: "/layuiadmin/", //静态资源所在路径
        }).extend({
            index: "lib/index", //主入口模块
        }).use(["table", "laydate"], function () {
            $ = layui.jquery, form = layui.form, table = layui.table, laydate = layui.laydate;

            table.render(table_conf());

            $("#FormSubmit").click(function () {
                table.render(table_conf());
            });

            laydate.render({
                elem: '#login_time', //指定元素
                type: 'datetime',
                trigger: 'click',
                max: '<?php echo date("Y-m-d H:i:s");?>',
            });

            table.on('toolbar(test)', function (obj) {

                var ids = table.checkStatus(obj.config.id);

                var put_ids = '';
                for (let index = 0; index < ids.data.length; index++) {
                    put_ids = put_ids + ids.data[index].room_id + '|' + ids.data[index].user_id + '|' + ids.data[index].nickname + '|' + ids.data[index].platform + ',';
                }

                if (obj.event == 'start_mult_chat') {
                    if (put_ids != '') {
                        layer.open({
                            type: 2,
                            title: "多选群发",
                            content: '/admin/privatechat/mult_start_chat?ids=' + put_ids + '&all=0',
                            area: ['1300px', '500px'],
                        });
                    }
                } else {
                    layer.open({
                        type: 2,
                        title: "所有群发",
                        content: '/admin/privatechat/mult_start_chat?ids=' + put_ids + '&all=1',
                        area: ['1300px', '500px'],
                    });
                }


            });
        });

        function table_conf() {
            return {
                elem: '#demo',
                id: '#demo',
                url: '/admin/privatechat/device?' + $("#sbumitForm").serialize(),
                toolbar: '#toolbaar',
                defaultToolbar: [
                    'filter', 'print', { title: '提示', layEvent: 'LAYTABLE_EXCEL', icon: 'layui-icon-table' },
                ],
                page: {
                    curr: 1   //默认从第一页开始搜索
                },
                method: "get",
                //where: $("#sbumitForm").serialize(),
                limit: 20,
                limits: [20, 30, 50, 100],
                text: {
                    none: '暂无相关数据！'//默认无数据
                },
                response: {
                    statusName: 'code',
                    statusCode: 0,
                    msgName: 'msg',
                    countName: 'count',
                    dataName: 'list',
                },
                cols: [[ //表头
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'device_id', title: '设备ID', width: "18%", align: "center" },
                    {
                        field: '', title: '客户端', width: "10%", align: "center", templet: function (item) {
                            switch (item.platform) {
                                case 0:
                                    return '浏览器';
                                case 1:
                                    return 'IOS';
                                case 2:
                                    return '安卓';
                            }
                        }
                    },
                    { field: 'user_id', title: '用户ID', width: "12%", align: "center" },
                    { field: 'nickname', title: '用户昵称', width: "12%", align: "center", },
                    {
                        field: '', title: 'IP地址', width: "13%", align: "center", templet: function (item) {
                            return '<a href="https://www.ipshudi.com/' + item.ip + '.htm" target="_blank">' + item.ip + '</a>';
                        }
                    },
                    { field: 'last_online_time', title: '最近在线时间', width: "14%", align: "center" },
                    { field: 'room_id', title: '登录直播间', align: "center", width: "11%" },
                    // {
                    //     field: '', title: '操作', align: "center", fixed: 'right', width: "100", templet: function (item) {
                    //         console.log(item);
                    //         return "<a class=\"layui-btn  layui-btn-xs\"  onclick=\"start_chat('" + item.room_id + "','" + item.user_id.toString() + "')\"><i class=\"layui-icon\"></i>发起私聊</a>";
                    //     }
                    // }
                ]],
                done: function (res, curr, count) {
                    $("[data-field='lowerHairPath']").css('display', 'none');
                    $(".layui-table-main tr").each(function (index, val) {
                        $($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());
                        $($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());
                    });
                    $(".layui-table-header tr").resize(function () {
                        $(".layui-table-header tr").each(function (index, val) {
                            $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
                        });
                    });
                    $(".layui-table-header tr").each(function (index, val) {
                        $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
                    });
                    $(".layui-table-body tr").resize(function () {
                        $(".layui-table-body tr").each(function (index, val) {
                            $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                        });
                    });
                    $(".layui-table-body tr").each(function (index, val) {
                        $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                    });
                }
            };
        }


        /**
         * 开始接入私聊
         * @param anchor_id
         * @param user_id
         * @returns {*}
         */
        function start_chat(anchor_id, user_id) {
            if (anchor_id < 1 || user_id < 1) {
                return layer.msg('参数错误，请刷新重试')
            }

            layer.load()
            $.ajax({
                url: '/admin/privatechat/start_chat',
                type: 'post',
                dataType: 'json',
                data: { anchor_id: anchor_id, user_id: user_id },
                success: function (res) {
                    if (res.code == 0) {
                        var index = layer.open({
                            type: 2,
                            title: "发起私聊",
                            content: '/admin/privatechat/start_chat?anchor_id=' + anchor_id + '&user_id=' + user_id,
                            area: ['560px', '600px'],
                        });
                        return layer.full(index);
                    }
                    return layer.msg(res.msg);
                },
                error: function (err) {
                    layer.msg('系统异常,请稍后再试!');
                },
                complete: function () {
                    layer.closeAll('loading');
                }
            });
        }

    </script>
</body>

</html>